<template>
  <div>
    <!-- 导航头部 -->
    <van-nav-bar title="登录" />
    <!-- 登录输入框  error-message属性是设置错误提示的-->
    <van-cell-group>
      <van-field
        v-model.trim="mobile"
        required
        label="手机号"
        placeholder="请输入手机号"
        :error-message="mobileErrorMsg"
        @input="validate"
      />
      <van-field
        v-model.trim="code"
        required
        label="验证码"
        placeholder="请输入验证码"
        :error-message="codeErrorMsg"
        @input="validate"
      />
    </van-cell-group>
    <!-- 登录按钮 -->
    <div class="btn-wrap">
      <van-button type="info" @click="login">登录</van-button>
    </div>
    <van-button type="primary" @click="getUserInfo">获取个人资料</van-button>
    <hr>
    <van-button type="primary" @click="getFansList">获取fans资料</van-button>
    <hr>
    <!-- 使用表单实现登录 表单内置了有校验的属性
     rules: 是为表单项添加规则的 是一个数组
     {} 每一条规则
     required: 必须传递
     message: 提示文本
     pattern: 正则表达式
     trigger: 触发时机
     -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="mobile"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[
          { required: true, message: '请填写手机号', trigger: 'onChange' },
          { pattern: /^1[3-9]\d{9}$/, message: '请填写11位手机号',trigger: 'onChange' }]"
      />
      <van-field
        v-model="code"
        type="password"
        name="验证码"
        label="验证码"
        placeholder="验证码"
        :rules="[
          { required: true, message: '请填写密码',trigger: 'onChange' },
          { pattern: /^\d{6}$/, message: '请填写6位验证码',trigger: 'onChange' }
        ]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// 目标:先完成登录功能(校验随后做)
// 1. 按钮绑定事件
// 2. 发送请求(找文档, 看请求方式,请求地址,需要传递的参数)
// 3. 查看发送请求返回的结果
import { reqLogin, reqGetUserProfile, reqGetFansList } from '@/api/user'
import { mapMutations } from 'vuex'
export default {
  // 组件名添加方便后期调试, 推荐首字母大写
  name: 'Login',
  data() {
    return {
      mobile: '18899828281',
      code: '246810', // 万能验证码 246810
      mobileErrorMsg: '', // 手机号的错误文本提示
      codeErrorMsg: '' // 验证码的错误文本提示
    }
  },
  methods: {
    // ...mapMutations('模块名',['mutation名'])
    ...mapMutations('user', ['setTokenInfo']),
    // 单独将校验的业务逻辑抽离到一个函数中 并设置这个函数的返回值
    validate() {
      // 手机号和验证码的非空校验
      if (!this.mobile.length) {
        this.mobileErrorMsg = '请输入手机号'
        return 1
      }
      // 正则校验手机号
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        this.mobileErrorMsg = '请输入合法的11位手机号'
        return 1
      }
      // 手机号全部校验通过 清空错误提示
      this.mobileErrorMsg = ''
      if (!this.code.length) {
        this.codeErrorMsg = '请输入验证码'
        return 1
      }
      // 验证码的合法校验
      if (!/^\d{6}$/.test(this.code)) {
        this.codeErrorMsg = '请输入合法6位验证码'
        return 1
      }
      // 验证码全部校验通过 清空错误提示
      this.codeErrorMsg = ''
      return 2
    },
    // 登录
    async login() {
      if (!this.validate() === 1) return
      this.$toast.loading({
        message: '加载中...', // 提示文本
        forbidClick: true, // 禁止背景点击
        overlay: true, // 添加灰色遮罩
        duration: 0 // 设置加载提示组件的展示时长 默认是2s 设置0 不隐藏
      })
      /* const res = await this.$http({
        url: '/v1_0/authorizations',
        method: 'post',
        // post 携带参数
        data: {
          mobile: this.mobile,
          code: this.code
        }
      }) */
      try {
        const res = await reqLogin(this.mobile, this.code)
        // console.log(res.data.data)
        // 提交user模块中存储token的mutation 原始写法
        // this.$store.commit('user/setTokenInfo', res.data.data)
        this.setTokenInfo(res.data.data)
        // Toast默认采用单例模式，即同一时间只会存在一个Toast
        this.$toast.success('登录成功')
        // 使用编程式导航跳转到/路径
        // this.$router.push('/')
        console.log(this.$route.query.backto)
        // 登录跳转之前 判断路由信息对象中是否有backto字段, 如果有 说明是被拦截的， 需要让用户原路返回
        if (this.$route.query.backto) {
          this.$router.back()
          // this.$router.push(this.$route.query.backto)
          // 如果是自己访问的登录页面， 让用户去首页
        } else {
          this.$router.push('/')
        }
      } catch (error) {
        this.$toast.fail('登录失败,请稍后重试')
      }
    },
    // 测试
    async getUserInfo() {
      const res = await reqGetUserProfile()
      console.log(res)
    },
    // 测试
    async getFansList() {
      const res = await reqGetFansList()
      console.log(res)
    },
    // 表单提交触发的submit事件
    async onSubmit() {
      this.$toast.loading({
        message: '加载中...', // 提示文本
        forbidClick: true, // 禁止背景点击
        overlay: true, // 添加灰色遮罩
        duration: 0 // 设置加载提示组件的展示时长 默认是2s 设置0 不隐藏
      })
      try {
        const res = await reqLogin(this.mobile, this.code)
        // console.log(res.data.data)
        // 提交user模块中存储token的mutation 原始写法
        // this.$store.commit('user/setTokenInfo', res.data.data)
        this.setTokenInfo(res.data.data)
        // Toast默认采用单例模式，即同一时间只会存在一个Toast
        this.$toast.success('登录成功')
        this.$router.push({ path: '/' })
      } catch (error) {
        this.$toast.fail('登录失败,请稍后重试')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-wrap{
  padding: 15px;
  .van-button {
    width: 100%;
    border-radius: 5px;
  }
}
</style>
